<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { useAuditJoin } from '@fl/api/mall-api'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const id = defineModel<string>('id', { required: true })
const visible = defineModel<boolean>('visible', { required: true })

const form = ref()
const title = ref('审核')

const { isPending, mutate } = useAuditJoin()

const initialState = {
    auditStatus: '',
    remark: '',
}

const state = ref<FieldValues>(cloneDeep(initialState))

const columns: PlusColumn[] = [
    {
        label: '审核状态',
        options: async () => [
            {
                label: '审批通过',
                value: 1,
            },
            {
                label: '审核拒绝',
                value: 2,
            },
        ],
        prop: 'auditStatus',
        valueType: 'select',
        width: 120,
    },
    {
        fieldProps: {
            maxlength: 100,
        },
        label: '备注',
        prop: 'remark',
        valueType: 'textarea',
        width: 120,
    },
]

const rules = {
    auditStatus: [
        {
            message: '请选择审核状态',
            required: true,
        },
    ],
}

async function confirm() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        const params = {
            applicationId: id.value,
            ...state.value,
        }
        console.log('confirm ~ params:', params)
        mutate(
            params,
            {
                onError(error) {
                    console.log('🚀 ~ onError ~ error:', error)
                },
                onSuccess: () => {
                    ElMessage.success('操作成功')
                    cancel()
                },
            },
        )
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    form.value.formInstance.resetFields()
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="800"
                close-on-press-escape
                @confirm="confirm"
                @cancel="cancel"
                @closed="reset"
    >
        <!-- <ElSkeleton v-if="isLoading"
                    animated
        /> -->

        <PlusForm ref="form"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="rules"
                  :has-footer="false"
        />

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
